import {
	LaptopOutlined,
	ToolOutlined,
	BookOutlined,
	MoneyCollectOutlined,
	BankOutlined,
	ClearOutlined,
	RobotOutlined
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, Card, Col, Row, Select, DatePicker, Space } from 'antd';
import MenuItem from 'antd/lib/menu/MenuItem';
import React, { Component, useEffect, useState } from 'react';
import Head from "../Head/Head"
import "./IndustryPage.css"


import LineChart from './Graph_Class/Line.js';
import RoseChart from './Graph_Class/Rose';
import HotG from './Graph_Class/HotGraph.js';

const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, icon) {
	return {
		key,
		icon,
		label,
	};
}

const items = [
	getItem('信息传输、软件和信息技术服务业', '1', <LaptopOutlined />),
	getItem('教育', '2', <BookOutlined />),
	getItem('卫生和社会工作', '3', <ClearOutlined />),
	getItem('公共管理、社会保障和社会组织', '4', <BankOutlined />),
	// getItem('科学研究和技术服务业', '5', <RobotOutlined />),
	// getItem('制造业', '6', <ToolOutlined />),
	// getItem('金融业', '7', <MoneyCollectOutlined />),

];

// var SelectedItem;//选择对象的key值
const App = () => {
	const [collapsed, setCollapsed] = useState(false);
	//将SelectedItem设为State,这样在修改菜单栏进行重新渲染的时候也对图表进行重新渲染
	const [SelectedItem, setSelectedItem] = useState('1');
	const onClickMenu = (e) => {
		setSelectedItem(e.key);
		console.log("选择对象改变为", SelectedItem);
	};
	const renderHotGraph = () => {
		var HG_title;
		switch (SelectedItem) {
			case '1': HG_title = '信息传输、软件行业'; break;
			case '2': HG_title = '教育行业'; break;
			case '3': HG_title = '卫生和社会工作'; break;
			case '4': HG_title = '公共管理、社会保障'; break;
			// case '5': HG_title = '科学研究和技术服务'; break;
			// case '6': HG_title = '制造业';break;
			// case '7': HG_title = '金融业'; break;
			default: HG_title = '信息传输、软件行业';
		}
		return <HotG
			title={HG_title}
			kind={parseInt(SelectedItem)}
			style={{ width: "52vw", height: "80vh" }} />
	};


	return (
		<React.Fragment>
			<Head keyValue='2'></Head>
			<div>
				<Layout
					style={{
						minHeight: '100vh',
						maxWidth: '1920px'
					}}
				>
					<Sider
						collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
						<div className="logo" />
						<Menu inlineIndent="30" theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} onSelect={onClickMenu} ></Menu>
					</Sider>
					<Layout className="site-layout">
						<Breadcrumb
							style={{
								margin: '16px 5px',
							}}
						>
							<Breadcrumb.Item>就业与行业信息地图</Breadcrumb.Item>
							<Breadcrumb.Item>各行业不同省份分布</Breadcrumb.Item>
						</Breadcrumb>
						<Content
							style={{
								margin: '0 16px',
							}}
						>
							<Layout>
								<Sider className="site-layout-background"
									style={{
										padding: 15,
										// minHeight: 680,
									}} width={'55vw'} height={'100vh'} >

									<Content
										style={{
											margin: '5 5vh ',
										}} width={'60vw'} height={'100vh'}>
										{renderHotGraph()}

									</Content>
								</Sider>

								<Layout>

									<Content className="site-layout-background" style={{
										left: 0,
										right: "0%",
										minHeight: '40vh',
										maxHeight: '60vh',
										minWidth: '30vw',
										marginLeft: 9,
										width: '30vw', height: "40vh",
									}}>
										{/* 这里是折线图*/}
										<LineChart
											title={' '}
											kind={parseInt(SelectedItem)}
											style={{ paddingLeft: 9, paddingTop: 9, minWidth: "30vw", minHeight: "40vh" }} />
									</Content>
									<Content className="site-layout-background1" style={{
										padding: 0,
										minHeight: '40vh',
										maxHeight: '60vh',
										minWidth: '30vw',
										marginLeft: 9,
										width: '30vw', height: "38vh"
									}} >

										{/*	这里是玫瑰图 */}
										<RoseChart
											title={'企业总数前五省份玫瑰图'}
											kind={parseInt(SelectedItem)}
											style={{ left: 'center', paddingLeft: 9, paddingTop: 9, width: "30vw", height: "35vh" }} />
									</Content>
								</Layout>

							</Layout>



						</Content>
					</Layout>
				</Layout>
			</div>
		</React.Fragment>
	);
};

export default App;